<template>
    <div class="m_right">
        <p></p>
        <div class="mem_tit">收货地址<button style="float: right;" @click="addAddress()">添加收货地址</button></div>

        <div class="address" v-for="address in addressList" :key="address.id">
            <div class="a_close"><a href="#" @click.prevent="delAddress(address.id)"><img
                        src="@/assets/images/a_close.png" /></a></div>
            <table border="0" class="add_t" align="center" style="width:98%; margin:10px auto;" cellspacing="0"
                cellpadding="0">
                <tr>
                    <td colspan="2" style="font-size:14px; color:#ff4e00;">{{ address.remark }}</td>
                </tr>
                <tr>
                    <td align="right" width="80">收货人姓名：</td>
                    <td>{{ address.userName }}</td>
                </tr>

                <tr>
                    <td align="right">配送地址：</td>
                    <td>{{ address.address }}</td>
                </tr>
                <tr>
                    <td align="right">手机：</td>
                    <td>{{ address.mobile }}</td>
                </tr>
                <tr>
                    <td align="right">电子邮箱：</td>
                    <td>{{ address.email }}</td>
                </tr>
            </table>

            <p align="right">
                <span v-if="address.isDefault != 1"><a href="#" style="color:#ff4e00;"
                        @click.prevent="setDefaultAddress(address.id)">设为默认</a>&nbsp; &nbsp; &nbsp;
                    &nbsp;</span>
                <span v-else>默认地址&nbsp; &nbsp; &nbsp; &nbsp;</span>
                <span><a href="#" style="color:#ff4e00;" @click.prevent="updateAddress(address.id)">编辑</a>&nbsp; &nbsp;
                    &nbsp; &nbsp;</span>
            </p>
        </div>

        <div>
            <address-choose :visible.sync="addShow" @added="getAddress"></address-choose>
        </div>
        <div>
            <update-address :visible.sync="updateShow" @updated="getAddress" :edit-id="updateId"></update-address>
        </div>
    </div>
</template>
<script>
import AddressChoose from './AddAddressChoose.vue';
import UpdateAddress from './UpdateAddress.vue';
export default {
    components: { AddressChoose, UpdateAddress },
    name: 'MemberAddressRight',
    data() {
        return {
            userId: '',
            addressList: {},
            addressNum: 0,
            updateId: 0,

            updateShow: false,
            addShow: false
        }

    },
    methods: {
        getAddress() {
            this.$axios({
                url: 'selectAddressByUserId',
                method: 'get',
                params: { userId: this.userId }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.addressList = rs.data.userAddress
                    this.addressNum = rs.data.addressNum

                }
            })
        },
        delAddress(id) {
            if (confirm('是否删除？')) {
                this.$axios({
                    url: 'deleteAddress',
                    params: { id: id }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == '5200') {
                        alert('删除成功！')
                        this.getAddress()
                    } else {
                        alert('删除失败！')
                    }
                })
            }

        },
        setDefaultAddress(id) {
            this.$axios({
                url: 'updateAddress',
                method: 'post',
                data: {
                    id: id,
                    userId: this.userId,
                    isDefault: 1
                },
                headers: {
                    'content-type': 'application/json'
                }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    alert('设置成功！')
                    this.getAddress()
                } else {
                    alert('设置失败！')
                }
            })
        },
        addAddress() {
            if (this.addressNum == 3) {
                alert('地址添加已达上限，请删除后再添加！')
                return
            }
            this.addShow = true
            this.updateShow = false
        },
        updateAddress(id) {
            this.updateId = 0
            this.$nextTick(() => {
                this.updateId = id       // 再变成真正 id，保证一定触发 watch
            })
            this.updateShow = true
            this.addShow = false
        }

    },
    mounted() {
        this.userId = window.sessionStorage.getItem('userId')
        console.log("用户id:" + this.userId)
        this.getAddress()
        console.log(this.userId)

    },
}
</script>
<style scoped>
.mem_tit>button {
    float: right;
    width: 150px;
    height: 35px;
    border: 1px solid coral;
    background-color: coral;
    color: white;
    margin-right: 25px;
}
</style>